<template>
    <div class="container">
        <el-row>
            <!-- 头像区 -->
            <el-col :span="4" style="text-align: center;">
                <el-image :src="teacher.url" style="width: 160px; height: 160px; border-radius: 150px; border: 5px solid lightblue"></el-image>
                <p style="text-align: center; font-size: 18px;" @click="handleAvatar">点击更换头像</p>
            </el-col>
            <el-col :span="16">
                <div class="text_div">
                    <h3>{{ teacher.name }}</h3>
                    <p>手机号: {{ teacher.phone }}</p>
                    <p>性别: {{ teacher.sex }}</p>
                    <p>老师介绍: {{ teacher.description }}</p>
                    <!-- 删除备注 -->
                </div>
            </el-col>
            <!-- 按钮区 -->
            <el-col :span="4">
                <el-button type="primary" @click="handleEdit">编辑信息</el-button>
                <el-button type="info" @click="emit('update:isList',true)">返回</el-button>
            </el-col>
        </el-row>

        <el-divider />
        <!-- tabs区 -->
        <el-tabs type="border-card">
            <!-- 老师分析区 -->
            <el-tab-pane label="上课时间轴">
                
                <el-timeline style="max-width: 600px">
                    <el-timeline-item
                      v-for="(activity, index) in activities"
                      :key="index"
                      :color="activity.color"
                      :timestamp="activity.timestamp"
                    >
                      {{ activity.content }}
                    </el-timeline-item>
                  </el-timeline>

            </el-tab-pane>

            <!-- 上课记录区 -->
            <el-tab-pane label="上课记录">
                
                <el-table :data="filterTableData" style="width: 100%">
                    <el-table-column label="课程名" prop="courseName" />
                    <el-table-column label="上课时间" prop="courseTime"/>
                    <el-table-column label="上课学员" prop="memberNames" />
                    <el-table-column label="次数/单人单次" prop="count"/>
                    <el-table-column align="right" width="360">
                      <template #header>
                        <el-input v-model="search" size="large" placeholder="Type to search" />
                      </template>
                    </el-table-column>
                  </el-table>

            </el-tab-pane>
            
          </el-tabs>
    </div>
</template>

<script setup>
//导入
import { ref, reactive, onMounted, computed, onBeforeMount, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps(['isList', 'id'])
const  {isList,id} = toRefs(props)
const emit = defineEmits(['update:isList'])

//useRoute钩子用来获取当前激活的路由信息。它返回一个Route对象，这个对象包含了当前路由的所有相关信息，
// 比如params（路径参数）、query（查询参数）、name（路由名称）、path（路径）等。
const route = useRoute()

onMounted(() => {
    //获取传过来的id
    // const id = route.params.id
    console.log("current id: ", id.value)
    fetchLocalData()
    //todo 请自行根据id去后端查询此老师的信息，获取如下结构的json数据
   
})
//定义响应式对象【注：此数据应该去后台来获取】
const teacher = reactive({
    "id": 1000,
    "name": "张良",
    "sex": "男",
    "phone": "13899007645",
    "description": "历史学专家，擅长引导学生思考古今变迁",
    "remark": "全职老师",
    "url": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
})

//上课时间轴中的模拟数据，这个数据要从后端获取
const activities = ref(null)
//模拟的数据
const classRecords = ref([])

//定义异步方法来加载数据【只是模拟，这里要改的】
async function fetchLocalData() {
    try {
        const data1 = await loadJson('demoDatas/teacher/activities.json')
        activities.value = data1

        const data2 = await loadJson('demoDatas/teacher/classRecord.json')
        classRecords.value = data2
        
    } catch (error) {
        console.error('从loadJson.js调用时发生错误:', error)
    }
}

//处理头像
const handleAvatar = () => {
    //todo 请自行完成

}

//采用抽屉式弹层来处理更新操作
const handleEdit = () => {
    //todo 请自行完成

}

const router = useRouter()

//返回
const goBack = () => {
    //
    router.back()
}

//老师授课录 表格区：
const search = ref('')

//这里采用计算属性 来过滤表格中的数据【只是前端过滤】
const filterTableData = computed(() => 
    classRecords.value.filter(
        (data) => !search.value || data.courseName.toLocaleLowerCase().includes(search.value.toLocaleLowerCase())
    )
)

</script>

<style>
    .text_div {
        padding: 10px 30px;
        font-size: 16px;
    }
    .text_div p {
        margin: 15px 0;
    }
</style>